<template>
  <div id="mesprocessflowbasic-add-or-update">
    <div class="form-unit">
      <span>工序</span>
    </div>
    <div class="transfer-wrap">
      <el-transfer
        filterable
        :filter-method="filterMethod"
        filter-placeholder="请输入工序名称"
        v-model="value2"
        target-order="push"
        :titles="['待选工序','已选工序']"
        :data="data2">
      </el-transfer>
      <el-button @click="workingProcedurePreview()" type="primary" id="reviewButton">预览</el-button>
    </div>
    <div class="form-unit">
      <span>工艺路线单模板</span>
    </div>
    <el-form :model="dataForm" :rules="dataRule" ref="dataForm" @keyup.enter.native="dataFormSubmit()" label-width="80px">
      <el-row :gutter="20">
        <el-col :span="12">
          <div class="grid-content bg-purple">
            <el-form-item  label="产品名称" prop="productionNum">
              <el-select v-model="dataForm.productionNum" clearable filterable placeholder="请选择">
                <el-option
                  v-for="item in productionList"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
                </el-option>
              </el-select>
            </el-form-item>
          </div>
        </el-col>
        <el-col :span="12">
          <div class="grid-content bg-purple">
            <el-form-item label="加工说明" prop="workingMemo">
              <el-input v-model="dataForm.workingMemo" placeholder="加工说明"></el-input>
            </el-form-item>
          </div>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="12">
          <div class="grid-content bg-purple">
            <el-form-item label="制定人" prop="makingPrincipal">
              <el-input v-model="dataForm.makingPrincipal" placeholder="制定人"></el-input>
            </el-form-item>
          </div>
        </el-col>
        <el-col :span="12">
          <div class="grid-content bg-purple">
            <el-form-item label="制定日期" prop="makingDate">
              <el-date-picker
                v-model="dataForm.makingDate"
                format="yyyy-MM-dd"
                value-format="yyyy-MM-dd HH:mm:ss"
                align="right"
                type="date"
                placeholder="选择日期"
                @change="getMakingDateTime"
                :picker-options="pickerOptions1">
              </el-date-picker>
            </el-form-item>
          </div>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="12">
          <div class="grid-content bg-purple">
            <el-form-item label="产品状态" prop="productionStatus">
              <el-input v-model="dataForm.productionStatus" placeholder="产品状态说明"></el-input>
            </el-form-item>
          </div>
        </el-col>
        <el-col :span="12">
          <div class="grid-content bg-purple">
            <el-form-item label="审核人" prop="reviewPrincipal">
              <el-input v-model="dataForm.reviewPrincipal" placeholder="审核人"></el-input>
            </el-form-item>
          </div>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="12">
          <div class="grid-content bg-purple">
            <el-form-item label="审核日期" prop="reviewDate">
              <el-date-picker
                v-model="dataForm.reviewDate"
                align="right"
                type="date"
                format="yyyy-MM-dd"
                value-format="yyyy-MM-dd HH:mm:ss"
                @change="getReviewDateTime"
                placeholder="选择日期"
                :picker-options="pickerOptions1">
              </el-date-picker>
            </el-form-item>
          </div>
        </el-col>
        <el-col :span="12">
          <div class="grid-content bg-purple">
            <el-form-item label="批准人" prop="approvalPrincipal">
              <el-input v-model="dataForm.approvalPrincipal" placeholder="批准人"></el-input>
            </el-form-item>
          </div>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="12">
          <div class="grid-content bg-purple">
            <el-form-item label="批准日期" prop="approvalDate">
              <el-date-picker
                v-model="dataForm.approvalDate"
                align="right"
                type="date"
                format="yyyy-MM-dd"
                value-format="yyyy-MM-dd HH:mm:ss"
                @change="getApprovalDateTime"
                placeholder="选择日期"
                :picker-options="pickerOptions1">
              </el-date-picker>
            </el-form-item>
          </div>
        </el-col>
        <el-col :span="12">
          <div class="grid-content bg-purple">
            <el-form-item label="状态" prop="processFlowStatus">
              <el-select v-model="dataForm.processFlowStatus" clearable placeholder="状态">
                <el-option
                  v-for="item in processFlowStatusList"
                  :key="item.code"
                  :label="item.name"
                  :value="item.code">
                </el-option>
              </el-select>
            </el-form-item>
          </div>
        </el-col>
      </el-row>
    </el-form>
    <span slot="footer" class="dialog-footer" style="display:block;text-align:center;">
      <el-button type="primary" @click="dataFormSubmit()">确定</el-button>
      <el-button @click="cancle()">取消</el-button>
    </span>
    <!-- 弹窗：为当前工艺路线单增加工序 -->
    <working-proceduce-preview :visible.sync="PreviewWorkingProcedureFlag" ref="previewProcedureUnit" :value="value2"></working-proceduce-preview>
  </div>
</template>

<script>
  import WorkingProceducePreview from './mesprocessflowbasic-preview'

  export default {
    data () {
      return {
        visible: false,
        // 穿梭框数据
        data2: [],
        // 穿梭框右侧选中数据
        value2: [],
        // 穿梭框检索方法
        filterMethod(query, item) {
          if (item) {
            return item.pinyin.indexOf(query) > -1
          }
        },
        dataForm: {
          id:'',
          processFlowNum: 0,
          productionNum: '',
          workingMemo: '',
          makingPrincipal: '',
          makingDate: '',
          productionStatus: '',
          reviewPrincipal: '',
          reviewDate: '',
          approvalPrincipal: '',
          approvalDate: '',
          processFlowStatus: '',
          workingProcedureNum: ''
        },
        dataListLoading: false,
        // 预览弹窗开关
        PreviewWorkingProcedureFlag: false,
        // 产品下拉选项
        productionList: [],
        pageIndex: 1,
        pageSize: -1,
        dataRule: {
          productionNum: [
            { required: true, message: '产品编号不能为空', trigger: 'blur' }
          ],
          workingMemo: [
            { required: true, message: '加工说明不能为空', trigger: 'blur' }
          ],
          makingPrincipal: [
            { required: true, message: '制定人不能为空', trigger: 'blur' }
          ],
          makingDate: [
            { required: true, message: '制定日期不能为空', trigger: 'blur' }
          ],
          productionStatus: [
            { required: true, message: '产品状态说明不能为空', trigger: 'blur' }
          ],
          reviewPrincipal: [
            { required: true, message: '审核人不能为空', trigger: 'blur' }
          ],
          reviewDate: [
            { required: true, message: '审核日期不能为空', trigger: 'blur' }
          ],
          approvalPrincipal: [
            { required: true, message: '批准人不能为空', trigger: 'blur' }
          ],
          approvalDate: [
            { required: true, message: '批准日期不能为空', trigger: 'blur' }
          ],
          processFlowStatus: [
            { required: true, message: '状态不能为空', trigger: 'blur' }
          ]
        },
        // 日期选择器自定义选项
        pickerOptions1: {
          disabledDate(time) {
            return time.getTime() > Date.now()
          },
          shortcuts: [
            {
              text: '今天',
              onClick(picker) {
                picker.$emit('pick', new Date())
              }
            },
            {
              text: '昨天',
              onClick(picker) {
                const date = new Date()
                date.setTime(date.getTime() - 3600 * 1000 * 24)
                picker.$emit('pick', date)
              }
            },
            {
              text: '一周前',
              onClick(picker) {
                const date = new Date()
                date.setTime(date.getTime() - 3600 * 1000 * 24 * 7)
                picker.$emit('pick', date)
              }
            }
          ]
        },
        processFlowStatusList: []
      }
    },
    components: {
      'working-proceduce-preview': WorkingProceducePreview
    },
    mounted (){
      this.init(this.$route.params.id)
      this.getProductionList()
      this.getDictList()
    },
    methods: {
      init (id) {
        this.getWorkingProcedureList()
        this.getOldWorkingProcedureList(id)
        this.dataForm.id = id
        this.visible = true
        this.$nextTick(() => {
          this.$refs['dataForm'].resetFields()
          if (id) {
            this.$http({
              url: this.$http.adornUrl(`/basic/mesprocessflowbasic/info/${id}`),
              method: 'get',
              params: this.$http.adornParams()
            }).then(({data}) => {
              if (data && data.code === 0) {
                this.dataForm = data.mesProcessFlowBasic
              }
            })
          }
        })
      },
      // 获取工序List
      getWorkingProcedureList() {
        this.$http({
          url: this.$http.adornUrl('/basic/mesworkingprocedure/list'),
          method: 'get',
          params: this.$http.adornParams({
            page: this.pageIndex,
            limit: this.pageSize
          })
        }).then(({ data }) => {
          if (data) {
            this.generateData2(data.page.list)
          } else {
            this.data2 = []
          }
        })
      },
      // 获取生产单元名称List，并绑定到穿梭框上
      generateData2(list) {
        const data = []
        const workingProcedureList = list
        const pinyin = workingProcedureList.concat('')
        workingProcedureList.forEach((city, index) => {
          data.push({
            label: city.workingProcedureName,
            key: city.workingProcedureNum,
            pinyin: city.workingProcedureName
          })
        })
        this.data2 = data
      },
      // 获取已有生产单元List
      getOldWorkingProcedureList(id) {
        this.$http({
          url: this.$http.adornUrl(
            '/basic/mesprocessflowbasic/findprocedurelist'
          ),
          method: 'get',
          params: this.$http.adornParams({
            processFlowNum: id,
            page: this.pageIndex,
            limit: this.pageSize
          })
        }).then(({ data }) => {
          if (data && data.code === 0) {
            data.page.list.forEach((item, index) => {
              this.value2.push(item.workingProcedureNum)
            })
          } else {
          }
        })
      },
      // 表单提交
      dataFormSubmit () {
        this.$refs['dataForm'].validate((valid) => {
          if (valid) {
            this.$http({
              url: this.$http.adornUrl(`/basic/mesprocessflowbasic/${!this.dataForm.processFlowNum ? 'save' : 'update'}`),
              method: 'post',
              data: this.$http.adornData({
                'processFlowNum': this.dataForm.processFlowNum || undefined,
                'productionNum': this.dataForm.productionNum,
                'workingMemo': this.dataForm.workingMemo,
                'makingPrincipal': this.dataForm.makingPrincipal,
                'makingDate': this.dataForm.makingDate,
                'productionStatus': this.dataForm.productionStatus,
                'reviewPrincipal': this.dataForm.reviewPrincipal,
                'reviewDate': this.dataForm.reviewDate,
                'approvalPrincipal': this.dataForm.approvalPrincipal,
                'approvalDate': this.dataForm.approvalDate,
                'processFlowStatus': this.dataForm.processFlowStatus,
                'dataListSelections' : this.value2
              })
            }).then(({data}) => {
             if (data && data.code === 0) {
                this.$message({
                  message: '操作成功',
                  type: 'success',
                  duration: 1500,
                  onClose: () => {
                    this.visible = false
                    this.$emit('refreshDataList')
                  }
                })
                eventBus.$emit('closeCurrentPage')
              } else {
                this.$message.error(data.msg)
              }
            })
          }else{
            
          }
        })
      },
      // 预览
      workingProcedurePreview () {
        this.PreviewWorkingProcedureFlag = true
        this.$nextTick(() => {
        this.$refs.previewProcedureUnit.init()
      })
      },
      // 获取数据字典列表
      getDictList(){
        let arr = ['process_flow_status']
        this.$http({
          url: this.$http.adornUrl('/basic/mescodemasterm/dataList'),
          method: 'post',
          data: this.$http.adornParams(arr , false)
        }).then(({data}) => {
          if (data && data.code === 0) {
            data.process_flow_status.forEach((item , index) => {
              let obj = {}
              obj.code = item.code
              obj.name = item.name
              this.processFlowStatusList.push(obj)
            })
          } else {
          }
          this.dataListLoading = false
        })
      },
      // 取消
      cancle() {
        eventBus.$emit('closeCurrentPage')
      },
      // 获取产品List
      getProductionList(){
        this.$http({
          url: this.$http.adornUrl('/basic/mesproductioninfob/list'),
          method: 'get',
          params: this.$http.adornParams({
            page: this.pageIndex,
            limit: this.pageSize
          })
        }).then(({ data }) => {
          if (data && data.code === 0) {
            data.page.list.forEach((item, index) => {
              let obj = {}
              obj.value = item.productionNum
              obj.label = item.productionName
              this.productionList.push(obj)
            })
          } else {
          }
        })
      },
      //时间格式转换
      getMakingDateTime(val){
        this.dataForm.makingDate = val
      },
      getReviewDateTime(val){
        this.dataForm.reviewDate = val
      },
      getApprovalDateTime(val){
        this.dataForm.approvalDate = val
      }
    }
  }
</script>

<style scoped lang="scss">
#mesprocessflowbasic-add-or-update {
  .form-unit {
    font-size: 15px;
    font-style: oblique;
    color: #6379bb;
    border-bottom: 1px solid #ddd;
    margin: 8px 10px 25px 10px;
    padding-bottom: 5px;
  }
  .transfer-wrap {
    display: flex;
    margin: 0px 10px 25px 10px;
    .el-transfer {
      width: 80%;
      margin-left: 16%;
    }
    #reviewButton {
      height: 40px;
      float: right;
    }
  }

  .el-form {
    overflow: hidden;
    .el-form-item {
      .el-input {
        width: 300px;
      }
      .el-select {
        width: 300px;
      }
    }
  }
  .el-footer {
    text-align: center !important;
  }
}
</style>
<style>
#mesprocessflowbasic-add-or-update .el-transfer-panel {
  width: 35% !important;
}
</style>